<template>
  <div class="container">
    <el-dialog
      title="商超订货单详情"
      :visible.sync="particularDialog.centerDialogVisible"
      @open="getData"
      @close="confirm"
      width="1200px"
      center
    >
      <div class="top">
        <el-form label-width="130px" label-position="left">
          <el-form-item label="供应商：">
            <p class="inp">{{ formData.supplier_name }}</p>
          </el-form-item>
          <el-form-item label="采购员：">
            <p class="inp">{{ formData.buyer_name }}</p>
          </el-form-item>
          <el-form-item label="配送中心：">
            <p class="inp">{{ formData.dcname }}</p>
          </el-form-item>
          <el-form-item label="预计到货时间：">
            <p class="inp">{{ formData.pre_time }}</p>
          </el-form-item>
          <el-form-item label="入库状态：">
             <p class="inp">{{ formData.is_avgMsg }}</p>
           
          </el-form-item>
        </el-form>
        <el-form
          style="margin-left: 40px"
          label-width="130px"
          label-position="left"
        >
          <el-form-item label="司机电话：">
             <p class="inp">{{ formData.driver_phone }}</p>
           
          </el-form-item>
          <el-form-item label="车牌号：">
             <p class="inp">{{ formData.car_number }}</p>
            
          </el-form-item>
          <el-form-item label="接收人：">
             <p class="inp">{{ formData.receive_people }}</p>
         
          </el-form-item>
          <el-form-item label="运费：">
             <p class="inp">{{ formData.freight_fee }}</p>
           
          </el-form-item>
          <el-form-item label="付款方式：">
             <p class="inp">{{ formData.fee_wayMsg }}</p>
           
          </el-form-item>
        </el-form>
        <el-form
          style="margin-left: 40px"
          label-width="130px"
          label-position="left"
        >
          <el-form-item label="发货人：">
             <p class="inp">{{ formData.send_people }}</p>
          </el-form-item>
          <el-form-item label="库管：">
             <p class="inp">{{ formData.warehouse_tube }}</p>
          </el-form-item>
          <el-form-item label="质检：">
             <p class="inp">{{ formData.quality_inspection }}</p>
          </el-form-item>
          <el-form-item label="附件：">
          <div class="annex">
            <el-upload
              class="upload-demo"
              style="display: inline; margin-left: 10px"
              action="#"
              :show-file-list="false"
              :http-request="addImg"
            >
              <el-button
                size="mini"
                type="primary"
                class="handleSearch"
                icon="el-icon-circle-plus"
                >上传图片</el-button
              >
            </el-upload>
            <div class="imageCenter">
              <el-image
                style="
                  width: 115px;
                  height: 115px;
                  margin-left: 10px;
                  background: #eee;
                  text-align: center;
                  line-height: 115px;
                "
                :src="imgUrl"
                fit="cover"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              <el-button
                style="display: block; margin: 0 auto"
                size="mini"
                type="primary"
                class="handleSearch"
                @click="btn"
                >确认</el-button
              >
            </div>
          </div>
        </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        empty-text="暂无数据"
      >
        <el-table-column
          prop="name"
          label="商品名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goods_bar_code"
          label="条形码"
          width="150px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          align="center"
          width="150px"
        ></el-table-column>
        <el-table-column
          prop="count"
          label="数量"
          align="center"
          width="150px"
        ></el-table-column>
        <el-table-column
          prop="bos_qty"
          label="箱数"
          align="center"
          width="150px"
        ></el-table-column>
        <el-table-column
          prop="rk_spec"
          label="规格"
          align="center"
          width="150px"
        ></el-table-column>
        <el-table-column
          prop="unit"
          label="单位"
          align="center"
          width="150px"
        ></el-table-column>
        <el-table-column
          prop="produce_date"
          label="生产日期"
          align="center"
          width="150px"
        ></el-table-column>
        <el-table-column
          prop="shelf_life"
          label="保质期(天)"
          align="center"
          width="150px"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import {
  getPrepurchaseGoods,
  editAnnex,
} from "@/api/superIndent/superIndentList";
import { getToken } from "@/utils/auth";
import { Loading } from "element-ui";
export default {
  props: {
    particularDialog: Object,
  },
  data() {
    return {
      tableData: [],
      formData: {},
      imgUrl: "",
      annex: "",
    };
  },
  created() {},
  methods: {
    //关闭
    confirm() {
      this.particularDialog.centerDialogVisible = false;
    },
    //上传附件
    addImg(param) {
      let loading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.1)",
      });
      let data = new window.FormData();
      data.append("filename", param.file);
      data.append("token", getToken());
      this.$axios.post("/smkapi/FileManage/upload", data).then((res) => {
        loading.close();
        if (res.data.code == 0) {
          this.annex = res.data.data.file_path;
          this.imgUrl = this.imgHttp + res.data.data.file_path;
        } else {
          this.$message({
            type: "info",
            message: res.data.msg,
          });
        }
      });
    },
    //确认
    btn() {
      if (this.annex) {
        let data = {
          id: this.particularDialog.id,
          annex: this.annex,
        };
        editAnnex(data).then((res) => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: res.msg,
            });
          }
        });
      } else {
        this.$message({
          type: "info",
          message: "请上传图片",
        });
      }
    },
    // 获取数据
    getData() {
      let data = {
        id: this.particularDialog.id,
      };
      getPrepurchaseGoods(data).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.goodslist;
          res.data.info.fee_wayMsg =
            res.data.info.fee_way == 1 ? "预付" : "到付";
          res.data.info.is_avgMsg =
            res.data.info.is_avg == 0 ? "成本价入库" : "平均价入库";
          this.formData = res.data.info;
          this.annex = res.data.info.annex;
          this.imgUrl = this.imgHttp + res.data.info.annex;
        }
      });
    },
  },
};
</script>
<style scoped>
.pagination {
  text-align: right;
  padding: 10px;
  background-size: cover;
}
.title {
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
}
.annex {
  display: flex;
}
.top {
  display: flex;
}
.inp {
  padding: 0;
  margin: 0;
  border: 1px solid #eee;
  border-radius: 2px;
  width: 200px;
  padding-left: 10px;
  height: 42px;
}
</style>